<template>
  <div style="margin-top: 50px">
    <svg width="400" height="400" viewBox="0 0 400 400">
      <!-- 外层等边五边形 -->

      <polygon :points="outerPolygonPoints" fill="none" stroke="blue" />
      <!-- 内层五边形 -->
      <polygon :points="innerPolygonPoints" fill="none" stroke="orange" />

      <g v-for="(point, index) in outerPolygonTextPoints" :key="index">
        <text :x="point.x" :y="point.y" fill="black" font-size="12" text-anchor="middle">
          {{ labels[index].text }}
        </text>
        <text :x="point.x" :y="point.y" fill="gray" font-size="10" text-anchor="middle" dy="13">
          {{ labels[index].color }}
        </text>
      </g>
      <!-- 从中心点到外五边形顶点的曲线 -->
      <!-- <g v-for="(outerPoint, index) in outerPolygonTextPoints2" :key="outerPoint.x">
        <path
          v-if="isPointOnOuterPolygon(innerPolygonPointsArray[index], outerPoint)"
          :d="generateCurvePath(centerX, centerY, outerPoint.x, outerPoint.y)"
          stroke="black"
          fill="black"
          stroke-width="1.5"
        />

        <circle
          v-if="isPointOnOuterPolygon(innerPolygonPointsArray[index], outerPoint)"
          v-for="(curvePoint, curveIndex) in generateIntermediatePoints(centerX, centerY, outerPoint.x, outerPoint.y)"
          :key="curveIndex"
          :cx="curvePoint.x"
          :cy="curvePoint.y"
          r="3"
          fill="black"
        />
        <ellipse
          :cx="outerPoint.x"
          :cy="outerPoint.y"
          :rx="outerPoint.rx || 3"
          :ry="outerPoint.ry || 3"
          fill="#C1FF24"
        />
      </g> -->

      <g v-for="(outerPoint, index) in outerPolygonTextPoints2" :key="'line-' + index">
        <line v-if="
          isPointOnOuterPolygon(innerTop[index],outerPoint)
        " :x1="centerX" :y1="centerY" :x2="outerPoint.x" :y2="outerPoint.y" stroke="none" stroke-width="0" />
        <!-- 直线上的五个点 -->
        <circle v-for="(linePoint, lineIndex) in linePoints[index]"
        v-if="isPointOnOuterPolygon(innerTop[index],outerPoint)"
         :key="'point-' + index + '-' + lineIndex"
         :cx="linePoint.x" :cy="linePoint.y" r="3" fill="red" />
      </g>

      <!-- <ellipse cx="1.99997" cy="2.09122" rx="1.36655" ry="1.36905" fill="#C1FF24"/>
<ellipse cx="1.99997" cy="17.6071" rx="1.36655" ry="1.36905" fill="#C1FF24"/>
<ellipse cx="1.99997" cy="34.9484" rx="1.36655" ry="1.36905" fill="#C1FF24"/>
<ellipse cx="1.99997" cy="53.2023" rx="1.36655" ry="1.36905" fill="#C1FF24"/>
<ellipse cx="1.99997" cy="68.7182" rx="1.36655" ry="1.36905" fill="#C1FF24"/> -->
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 中心点坐标
      centerX: 200,
      centerY: 200,
      // 外层五边形边长
      outerRadius: 80,
      // 内层五边形边长（不一）
      innerRadius: 60,
      innerSides: [80, 16, 16, 16, 16], // 内层五边形的边长数组
      labels: [
        {
          text: "A",
          color: "red",
        },
        {
          text: "B",
          color: "green",
        },
        {
          text: "C",
          color: "blue",
        },
        {
          text: "D",
          color: "purple",
        },
        {
          text: "E",
          color: "orange",
        },
      ],
      rotationAngle: (55 * Math.PI) / 180,
    };
  },
  computed: {
    outerPolygonPoints() {
      console.log(
        "外五边形顶点1",
        this.generatePolygonPoints(
          this.centerX,
          this.centerY,
          this.outerRadius,
          5,
          [],
          this.rotationAngle
        )
      );
      return this.generatePolygonPoints(
        this.centerX,
        this.centerY,
        this.outerRadius,
        5,
        [],
        this.rotationAngle
      );
    },
    innerPolygonPoints() {
      console.log(
        "内五边形顶点1",
        this.generatePolygonPoints(
          this.centerX,
          this.centerY,
          this.innerRadius,
          5,
          this.innerSides,
          this.rotationAngle
        )
      );
      return this.generatePolygonPoints(
        this.centerX,
        this.centerY,
        this.innerRadius,
        5,
        this.innerSides,
        this.rotationAngle
      );
    },
    outerPolygonTextPoints() {
      return this.generateTextPoints(
        this.centerX,
        this.centerY,
        this.outerRadius + 20,
        5
      );
    },
    outerPolygonTextPoints2() {
      let points = this.generateTextPoints(
        this.centerX,
        this.centerY,
        this.outerRadius,
        5,
        this.rotationAngle
      );
      console.log("外五边形顶点2", points);
      // points.forEach((point, index) => {
      //   this.
      // });
      return this.generateTextPoints(
        this.centerX,
        this.centerY,
        this.outerRadius,
        5,
        this.rotationAngle
      );
    },
    innerPolygonPointsArray() {
      console.log(
        "内五边形点",
        this.generateTextPoints(
          this.centerX,
          this.centerY,
          this.innerRadius,
          5,
          this.rotationAngle
        )
      );
      return this.generateTextPoints(
        this.centerX,
        this.centerY,
        this.innerRadius,
        5,
        this.rotationAngle
      );
    },
    linePoints() {
      let linePoints = [];
      this.outerPolygonTextPoints2.forEach(item => {
        let point = this.generateFivePointsOnLine(
          this.centerX,
          this.centerY,
          item.x,
          item.y
        )
        linePoints.push(point)
      });
      console.log("直线上的五个点", linePoints);
      return linePoints
    },
    innerTop(){
      let arr =this.innerPolygonPoints.split(" ")
      arr.forEach((item, index) => {
        let point = item.split(",")
        arr[index] = {
          x: parseFloat(point[0]),
          y: parseFloat(point[1])
        }
      })
      console.log("内五边形顶点数组", arr);
      return arr
    }
  },
  methods: {
    generatePolygonPoints(
      cx,
      cy,
      radius,
      sides,
      sideLengths = [],
      rotation = 0
    ) {
      let points = [];
      const angleIncrement = (2 * Math.PI) / sides;
      for (let i = 0; i < sides; i++) {
        const angle = angleIncrement * i + rotation;
        const x =
          cx +
          radius *
          (sideLengths[i] ? sideLengths[i] / radius : 1) *
          Math.cos(angle);
        const y =
          cy +
          radius *
          (sideLengths[i] ? sideLengths[i] / radius : 1) *
          Math.sin(angle);
        points.push(`${x},${y}`);
      }
      return points.join(" ");
    },
    generateTextPoints(cx, cy, radius, sides, rotation = 0) {
      let points = [];
      const angleIncrement = (2 * Math.PI) / sides;
      for (let i = 0; i < sides; i++) {
        const angle = angleIncrement * i + rotation; // 从顶部开始
        const x = cx + radius * Math.cos(angle);
        const y = cy + radius * Math.sin(angle);
        points.push({ x, y });
      }
      console.log(points);
      return points;
    },
    // generateCurvePath(x1, y1, x2, y2) {
    //   // 使用二次贝塞尔曲线生成路径
    //   const controlX = (x1 + x2) / 2; // 控制点的 X 坐标
    //   const controlY = y1 - 50; // 控制点的 Y 坐标（向上偏移）
    //   return `M ${x1},${y1} Q ${controlX},${controlY} ${x2},${y2}`;
    // },
    // generateFivePoints(x1, y1, x2, y2) {
    //   // 计算曲线上的五个点，包括起点和终点
    //   const controlX = (x1 + x2) / 2;
    //   const controlY = y1 - 50;
    //   const points = [];
    //   for (let t = 0; t <= 1; t += 0.25) {
    //     const x = (1 - t) * (1 - t) * x1 + 2 * (1 - t) * t * controlX + t * t * x2;
    //     const y = (1 - t) * (1 - t) * y1 + 2 * (1 - t) * t * controlY + t * t * y2;
    //     points.push({ x, y });
    //   }
    //   return points;
    // },
    // isPointOnOuterPolygon(innerPoint, outerPoint) {
    //   // 判断内五边形的点是否与外五边形的顶点重合
    //   return Math.abs(innerPoint.x - outerPoint.x) < 1 && Math.abs(innerPoint.y - outerPoint.y) < 1;
    // },
    generateFivePointsOnLine(x1, y1, x2, y2) {
      // 计算直线上的五个点，包括起点和终点
      const points = [];
      for (let t = 0; t <= 1; t += 0.25) {
        const x = x1 + t * (x2 - x1);
        const y = y1 + t * (y2 - y1);
        points.push({ x, y });
      }
      // console.log("直线上的五个点", points);
      return points;
    },
    isPointOnOuterPolygon(innerTop,outerPoint) {
      // console.log("判断点", innerPoint, outerPoint);
      // 判断内五边形的点是否与外五边形的顶点重合
      // return (
      //   Math.abs(innerPoint.x - outerPoint.x) < 1 &&
      //   Math.abs(innerPoint.y - outerPoint.y) < 1
      // );
      // let flag = false;
      // this.innerTop.forEach(item => {
      //   if (item.x == outerPoint.x && item.y == outerPoint.y) {
      //     flag = true;
      //   }
      // })
      // console.log("判断结果", innerTop.x == outerPoint.x && innerTop.y == outerPoint.y);
      return innerTop.x == outerPoint.x && innerTop.y == outerPoint.y;
    },

  },
};
</script>
